import { IFormProps, size, formItemLayout, dateTimeFormat, getUploadResult, productPage, getImages, getFileList, dateFormat } from '../../utils/common';
import React from 'react';
import { Modal, Row, Form, Input, Select, Upload, Checkbox, InputNumber, Col, Button, Table, Popconfirm, DatePicker, message } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
const Styles = require("../../styles/index.less");
import moment from 'moment';
import { PaginationProps } from 'antd/lib/pagination';
export interface IItemCommentListProps extends FormComponentProps {
    itemComments: Array<api.SingleUserMallItemsVOItemCommentVO>,
    loading: boolean,
    onSearch: (any) => void,
    onRemove: (any) => void,
    onSetComment:(any) => void
    pagination: PaginationProps,
    pageIndex: number,
    pageSize: number,
}
class ItemCommentList extends React.PureComponent<IItemCommentListProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
        beginDate: '',
        endDate: '',
        star: '',
        visible: false,
    }

    search = () => {
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                const {
                    beginDate,
                    endDate,
                    star
                } = this.state;
                form = Object.assign({}, form, {
                    beginDate,
                    endDate,
                    star
                });
                this.props.onSearch(form);
            }
        });
    }

    remove = (id) => {
        this.props.onRemove(id);
    }

    onChange = (date, dateString) => {
        //console.log(date, dateString);
        this.setState({ beginDate: dateString[0], endDate: dateString[1] });
        //this.props.form.setFields({ beginTime: dateString[0], endTime: dateString[1] });
    }

    onTypeChange = (star) => {
        //console.log(star);
        this.setState({ star });
        //this.props.form.setFields({ type });
    }

    setComment = (itemComment) =>
    {
        this.props.onSetComment(itemComment)
    }


    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { itemComments, loading, pagination, pageIndex, pageSize } = this.props;
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}><Col span={24}>
                    <Form layout="inline">
                        <Form.Item label='选择时间'>
                            <DatePicker.RangePicker onChange={this.onChange}
                                format={dateFormat} />
                        </Form.Item>
                        <Form.Item label='评论类型'>
                            <Select defaultValue="" style={{ width: 120 }} onChange={this.onTypeChange}>
                                <Select.Option value="">全部</Select.Option>
                                <Select.Option value="5">五星好评</Select.Option>
                                <Select.Option value="4">四星好评</Select.Option>
                                <Select.Option value="3">三星中评</Select.Option>
                                <Select.Option value="2">二星中评</Select.Option>
                                <Select.Option value="1">一星差评</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                        </Form.Item>
                    </Form>
                    <Col span={24}>
                        <hr className={Styles.hrBorder} />
                        <h3>商品评论列表</h3>
                    </Col>
                    <Col span={24}>
                        <Table
                            dataSource={itemComments}
                            bordered
                            pagination={pagination}
                            rowKey={(record: api.SingleUserMallItemsVOItemCommentVO) => String(record.id)}
                            loading={loading}
                        >
                            <Table.Column title="序号" key="no" render={(text, record, index) => {
                                return (pageIndex - 1) * pageSize + index + 1
                            }} />
                            <Table.Column title="昵称" key="name" dataIndex="name" />
                            <Table.Column title="头像" key="avatar" render={(text, record: api.SingleUserMallItemsVOItemCommentVO, index) => {
                                return <img width='100px' src={record.avatar} />
                            }} />
                            <Table.Column title="评论内容" key="comment" dataIndex="comment" />
                            <Table.Column title="评论图片" key="images" render={(text, record: api.SingleUserMallItemsVOItemCommentVO, index) => {
                                return record.commentImages && record.commentImages.split(',').map((image) => {
                                    return <img width='100px' src={image} />
                                })
                            }} />
                            <Table.Column title="评论时间" key="creationTime" render={(text, record: api.SingleUserMallItemsVOItemCommentVO, index) => {
                                return moment(record.creationTime).format(dateTimeFormat)
                            }} />
                            <Table.Column title="回复内容" key="replyComment" dataIndex="replyComment" />
                            <Table.Column title="操作" render={(text, record: api.SingleUserMallItemsVOItemCommentVO, index) => {
                                return (
                                    
                                    <div>
                                        {
                                            !record.hasReply ?                                         
                                            <a className={Styles.M_RIGHT} onClick={() => this.setComment(record)}>
                                            回复
                                                </a> : ""
                                        }
                                        <Popconfirm title="确定删除吗?" onConfirm={() => { this.remove(record.id); }}>
                                            <a>删除</a>
                                        </Popconfirm>
                                    </div>
                                );
                            }} />
                        </Table>
                    </Col>
                </Col>
                </Row>
            </Row>
        )
    }
}

export default Form.create()(ItemCommentList);